const app = getApp();

/*
小程序利用canvas实现一键保存图片功能 */
Page({

  /**
   * 页面的初始数据
   */
  data: {
    comeBack:false,//未授权进去设置
    canvasHidden: true, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
    canvas: {
      width: 636,
      height: 920,
      bg_img: '', //背景图片
      user_img: '', //用户头像
      user_name: '', //用户名称
      icon_img: '', //荣誉图片
      icon_name: '', //荣誉名称
      condition:'',//次数
      ewm_img: '', //二维码图片
    },
    shareImgPath: '',
    proportion:1,//比例
    shareImgSrc: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    wx.getSystemInfo({
      success: res => {// 设置比例
        this.setData({proportion: res.screenWidth/750})
      }
    })
    this.setData({
      ['canvas.icon_img']: options.img,
      ['canvas.icon_name']: options.name,
      ['canvas.condition']: options.condition
      
    })
    app._getSettingInfo(res => {
      this.setData({ ['canvas.bg_img']: res.shareBg, ['canvas.ewm_img']: res.miniCode})
      this.shareBg()
    })
  },
  onShow() {
    if (this.authorizationJudgment()) {
      //没有授权（上面的方法处理）
    }else if (this.data.comeBack){
      this.shareBg()
      this.setData({ comeBack:false})
    }
  },
  //授权判断
  authorizationJudgment() {
    let userInfo = wx.getStorageSync('userInfo');
    if (userInfo == '' || userInfo.avatarUrl == '') {
      wx.showModal({
        title: '提示',
        content: '需要获取您的授权~',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '#72B9C3',
        confirmText: '前往授权',
        confirmColor: '#72B9C3',
        success: res => {
          if (res.confirm) {
            this.setData({ comeBack: true })
            wx.navigateTo({
              url: '/pages/get_user_info/index',
            })
          }
        }
      })
      return true
    } else{
      return false
    }
  },
  //获取临时路径
  getTempFilePath: function() {
    wx.canvasToTempFilePath({
      canvasId: 'share',
      success: (res) => {
        this.setData({
          shareTempFilePath: res.tempFilePath
        })
      }
    })
  },
  shareBg(callback) {
    let { icon_img, bg_img, icon_name, ewm_img, width, height, condition } = this.data.canvas
    let text = `通过足下塞旅累计报名${condition}次`;
    let left = (636 - text.length * 24)/2;
    let userInfo = wx.getStorageSync('userInfo');
      callback?wx.showLoading({ title: '生成图片中' }):''
      console.time('getTime');
      const ctx = wx.createCanvasContext('share');
      this.downloadFile(bg_img).then(res => {//下载背景图
        this.drawImage(ctx, res, 0, 0, width, height,'', () => {
          ctx.beginPath();
          ctx.arc(31, 34,22, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fillStyle = 'rgba(255, 255, 255,1)';
          ctx.fill();
          this.downloadFile(userInfo.avatarUrl).then(res => {//下载用户头像
          this.drawImage(ctx, res, 22, 28, 80, 80, true,  () => {
            this.drawText(ctx, userInfo.nickName, 32, 131, 48, () => { //绘制昵称
              this.downloadFile(icon_img).then(res => {//下载荣誉图
                this.drawImage(ctx, res, 180, 292, 276, 276, '', () => {
                  this.drawText(ctx, icon_name, 32, 254, 640, () => {
                    this.drawText(ctx, text, 24, left, 690, () => { // 达成条件文字
                      this.downloadFile(ewm_img).then(res => {//下载二维码
                        this.drawImage(ctx, res, 24, 792, 112, 112, '', () => {
                          ctx.save();
                          this.setData({ canvasHidden: false })
                          console.timeEnd('getTime');
                          callback ? wx.hideLoading() : ''
                          if (callback) {
                            callback()
                          }
                        })
                      })
                    })
                  })
                })
              })
            })
          })
        })
        })
      })
  },
  //*  图片 x轴左上角坐标 x轴右上角坐标 x轴左下角坐标 y轴右上角坐标 type (true 画圆  false直接画)
  drawImage(ctx, img, xt, yt, xb, yb,type,callback) {
    let proportion = this.data.proportion
    xt = xt*proportion
    yt = yt*proportion
    xb = xb*proportion
    yb = yb*proportion
    ctx.save();
    if (type) {//绘制圆图片
      ctx.beginPath(); //开始绘制
      //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
      ctx.arc(xb / 2 + xt, yb / 2 + yt, xb / 2, 0, Math.PI * 2, false);
      ctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
      ctx.drawImage(img, xt, yt, xb, yb)
      ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
      ctx.draw(true, callback()); //可将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
    } else {
      ctx.drawImage(img, xt, yt, xb, yb)
      ctx.draw(true, callback())
    }
  },
  //将线上图片地址下载到本地，只有在需要转换url的时候调用即可
  downloadFile(url) {
    return new Promise(function(resolve) {
      wx.downloadFile({
        url: url,
        success: function(res) {
          if (res.statusCode === 200) {
            resolve(res.tempFilePath);
          }0.
        }
      })
    })
  },
  //文本绘制
  drawText: function (ctx, str, fontSize, x, y,callback) {
    ctx.save()
    let proportion = this.data.proportion
    ctx.setFillStyle('#fff')
    ctx.setFontSize(fontSize * proportion)
    ctx.fillText(str, x * proportion, y * proportion)
    ctx.draw(true, callback())
  },

  //保存至相册
  saveImage:function () {
    if (this.authorizationJudgment()) {
      //没有授权（上面的方法处理）
      console.log('没有授权')
    } else if (!this.data.canvasHidden) { // 已经生成了
      this.judge();
      console.log('已经生成了，导出')
    } else { // 授权了但没有生成
      console.log('授权了但没有生成，重新生成后导出')
      this.shareBg(()=>{
        this.judge();
      })
    }
  },
  judge(){
    let { width, height } = this.data.canvas
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: width,
      height: height,
      destWidth: width,
      destHeight: height,
      canvasId: 'share',
      success: res => {
        this.setData({ shareImgSrc: res.tempFilePath })
        this.saveImageToPhotosAlbum(res.tempFilePath)
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
  saveImageToPhotosAlbum(img){
    let that = this
    wx.saveImageToPhotosAlbum({
      filePath: img,
      success: function (data) {
        wx.showModal({
          title: '图片保存成功',
          content: '图片成功保存到相册了，去发圈噻~',
          showCancel: false,
          confirmText: '好哒',
          confirmColor: '#72B9C3',
          success: function (res) {
            that.setData({ canvasHidden: true})
          }
        })
      },
      fail: function (err) {
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
          wx.showModal({
            title: '提示',
            content: '需要获取权限才能保存到相册',
            success (res) {
              if (res.confirm) {
                    wx.openSetting({
                      success(settingdata) {
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showToast({ title: '获取权限成功'})
                          console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                        } else {
                          wx.showModal({
                            title: '提示',
                            content: '没有权限，人家很难给你保存到相册',
                            showCancel: false,
                            confirmText: '好的',
                            confirmColor: '#72B9C3',
                            success: function (res) {
                            }
                          })
                          console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                        }
                      }
                    })
              } else if (res.cancel) {
                // console.log('用户点击取消')
              }
            }
          })
        }
      }
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})